<template>
  <div id="handleDialog">
    <el-dialog
      width="600px"
      title="新增"
      :visible.sync="handleDialogData.isShow"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="员工号：" prop="employeeNumber">
          <el-input
            @change="getUserInfo"
            style="width: 310px"
            v-model="ruleForm.employeeNumber"
            placeholder="请输入员工号"
          ></el-input>
          <span class="staff-name" v-if="ishava">已存在</span>
          <span class="staff-name" v-if="noUser">员工不存在</span>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input
            style="width: 310px"
            placeholder="请输入姓名"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="mobilePhone">
          <el-input
            style="width: 310px"
            v-model="ruleForm.mobilePhone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="部门：" prop="branch">
          <el-input style="width: 310px" v-model="ruleForm.branch"></el-input>
        </el-form-item> -->
        <el-form-item label="岗位：" prop="jobs">
          <el-input
            style="width: 310px"
            v-model="ruleForm.jobs"
            placeholder="请输入岗位"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-select
            style="width: 310px"
            v-model="ruleForm.status"
            placeholder="请选择课程状态"
          >
            <el-option label="未发布" value="DRAFT"></el-option>
            <el-option label="已发布" value="PUBLISHED"></el-option>
            <el-option label="已隐藏" value="HIDE"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="confirmHandle('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="handleDialogData.isShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { validateTelephone, validateEmail } from '@utils/validate'
import { addUser, backCode } from '@/api/userInfo'
export default {
  props: {
    handleDialogData: {
      type: Object,
      default: () => {
        return {
          isShow: false,
          params: ''
        }
      }
    }
  },
  data() {
    return {
      ishava: false,
      noUser: false,
      ruleForm: {
        employeeNumber: '',
        name: '',
        mobilePhone: '',
        // branch: '',
        jobs: ''
      },
      rules: {
        employeeNumber: [
          { required: true, message: '请输入员工号', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobilePhone: [
          { required: true, message: '请输入员工手机号', trigger: 'blur' }
        ],
        // branch: [
        //   { required: true, message: '请输入员工部门', trigger: 'blur' }
        // ],
        jobs: [{ required: true, message: '请输入员工岗位', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  mounted() {},
  methods: {
    getUserInfo() {
      this.noUser = false
      let code = this.ruleForm.employeeNumber
      let params = {}
      backCode(
        code,
        params,
        (res) => {
          this.ishava = false
          if (
            res.mobilePhone == null &&
            res.jobs == null &&
            res.employeeName == null &&
            res.employeeNumber == null
          ) {
            this.noUser = true
          }
          this.$nextTick(() => {
            this.ruleForm.mobilePhone = res.mobilePhone
            this.ruleForm.jobs = res.jobs
            this.ruleForm.name = res.employeeName
          })
        },
        (res) => {
          this.$message({
            message: res.message,
            type: 'warning'
          })
          this.ishava = true
          return false
        }
      )
    },
    cancel() {
      this.handleDialogData.isShow = false
    },
    confirmHandle() {
      var _this = this
      if (validateTelephone(this.ruleForm.mobilePhone)) {
        let params = { ...this.ruleForm }
        addUser(
          params,
          (res) => {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.cancel()
          },
          (err) => {
            _this.$message({
              message: err.message,
              type: 'warning'
            })
          }
        )
      } else {
        _this.$message({
          message: '请输入正确的11位手机号',
          type: 'warning'
        })
        return false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.staff-name {
  margin-left: 10px;
  color: red;
}
</style>
